import { useState } from "react";
import "./index.less";
import { Input, message } from "antd";
import { request } from "../../../../../../../common/request";
import { urls } from "../../../../../../../common/urls";

function Password({profileList}: any) {
  const [newPassword, setNewPassword] = useState('');
  const [oldPassword, setOldPassword] = useState('');

  const handleSetNewPassword = (e: any) => {
    setNewPassword(e.target.value);
  }
  
  const handleSetOldPassword = (e: any) => {
    setOldPassword(e.target.value);
  }

  const submitPassword = () => {
    request({
      method: "post",
      data: {
        method: urls.submitPassword,
        password: newPassword,
        password_p: oldPassword
      },
    }).then((res: any) => {
      message.success(res.msg);
    }).catch((err) => {
      message.error(err);
    });
  };

  return (
    <>
      <div className="password-page text-style">
        <div>
          <div className="link-item" style={{ borderTop: "none" }}>
            <div>姓名</div>
            <div>{profileList.mobile}</div>
          </div>
          <div className="link-item">
            <div>新密码</div>
            <Input
              className="password-item-input"
              placeholder="请输入新密码"
              value={newPassword}
              onChange={ handleSetNewPassword }
            />
          </div>
          <div className="link-item">
            <div>旧密码</div>
            <Input
              className="password-item-input"
              placeholder="请输入旧密码"
              value={oldPassword}
              onChange={ handleSetOldPassword }
            />
          </div>
        </div>
        <div className="password-btn" onClick={ submitPassword }>保存</div>
      </div>
    </>
  );
}

export default Password;
